<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="../assets/options.css">
    <script type="text/javascript" src="../assets/options.js"></script>
    <title>Options - JSON Viewer</title>
  </head>
  <body>

    <div class="container">
      <h1>
        <span class="logo" title="JSON Viewer"></span>
        <span class="page-title">Options page</span>
      </h1>

      <form id="options">
        <header>
          <h2>Theme</h2>
        </header>

        <div class="select-style">
          <select id="themes" name="theme"></select>
        </div>
        <textarea id="themes-example" name="themes-example" disabled="disabled" style="display: none;">
        </textarea>

        <header>
          <h2>Add-ons</h2>
          <span class="hint">Edit this code</span><br/>
          <div class="explain">
            <ul>
              <li>
                <strong>"prependHeader"</strong> - <span class="hint">Comment header with URL and timestamp (boolean). Default true</span>
              </li>
              <li>
                <strong>"maxJsonSize"</strong> - <span class="hint">value in kbytes (integer). Default 400</span>
              </li>
              <li>
                <strong>"alwaysFold"</strong> - <span class="hint">Fold from the second level. A button to unfold all will appear if the value is true (boolean). Default false</span>
              </li>
              <li>
                <strong>"alwaysRenderAllContent"</strong> - <span class="hint">Disables the custom search and renders all content. Be aware that with this option <span class="underline">large files</span> will have a <span class="underline">significant performance reduction</span> (boolean). Default false</span>
              </li>
              <li>
                <strong>"sortKeys"</strong> - <span class="hint">Sort objects by key (boolean). Default false</span>
              </li>
              <li>
                <strong>"clickableUrls"</strong> - <span class="hint">Make URLs clickable (boolean). Default true</span>
              </li>
              <li>
                <strong>"wrapLinkWithAnchorTag"</strong> - <span class="hint">Add URLs as anchor tag (boolean). Default false</span>
              </li>
              <li>
                <strong>"openLinksInNewWindow"</strong> - <span class="hint">Open URLs in the same window/tab (boolean). Default true</span>
              </li>
              <li>
                <strong>"autoHighlight"</strong> - <span class="hint">Highlights the JSON from the beginning. When set to false it still possible to highlight the JSON from the raw page (boolean). Default true</span>
              </li>
            </ul>
          </div>
        </header>

        <textarea id="addons" name="addons" style="display: none;">
        </textarea>

        <header>
          <h2>Structure</h2>
          <span class="hint">Edit this code</span><br/>
          <div class="explain">
            <ul>
              <li>
                <strong>"tabSize"</strong> - <span class="hint">Default 2</span>
              </li>
              <li>
                <strong>"indentCStyle"</strong> - <span class="hint">Default false</span>
              </li>
              <li>
                <strong>"showArraySize"</strong> - <span class="hint">Default false</span>
              </li>
            </ul>
          </div>
        </header>

        <textarea id="structure" name="structure" style="display: none;">
        </textarea>

        <header>
          <h2>Custom Style</h2>
          <span class="hint">Edit this code</span><br/>
          <span class="hint">This field accepts CSS code. Use ctrl + space to autocomplete the values, enjoy!</span>
        </header>

        <textarea id="style" name="style" style="display: none;">
        </textarea>

        <div class="action-bar">
          <div class="container">
            <a class="version" target="_blank"></a>
            <button id="reset">Reset to defaults</button>
            <button id="save">Save</button>
          </div>
        </div>
      </form>

    </div>
  </body>
</html>
